<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 成绩数据
 *
 * @type {UnwrapNestedRefs<{total: number, form: {courseScoreUpdateMan: string, courseScoreCourseName: string, courseScoreStudentNo: string, courseScoreStudentName: string, courseScoreAchievement: string, courseScoreOrderClassNo: string, courseScoreOrderClassName: string, courseScoreCourseNo: string}, formVisible: boolean, courseNo: string, pageSize: number, tableData: *[], excelOrderClassName: string, pageNum: number}>}
 */
const scoreData = reactive({
  excelOrderClassName: '',
  courseNo: '',
  tableData: [],
  total: 0,
  pageSize: 5,
  pageNum: 1,
  formVisible: false, // 是否显示弹窗
  form: {
    courseScoreOrderClassNo: '',
    courseScoreOrderClassName: '',
    courseScoreCourseNo: '',
    courseScoreCourseName: '',
    courseScoreStudentNo: '',
    courseScoreStudentName: '',
    courseScoreAchievement: '',
    courseScoreUpdateMan: '',
  }
})

/**
 * 加载成绩
 */
const loadScore = () => {
  request.get(`/api/course-score/find-score-teacher/${account.accountNo}`, {
    params: {
      pageNum: scoreData.pageNum,
      pageSize: scoreData.pageSize,
      courseNo: scoreData.courseNo,
    }
  }).then(res => {
    scoreData.tableData = res.data?.list || []
    scoreData.total = res.data?.list.map(item => item.courseScoreCountNumber)[0] || 0;
  })
}
// 调用成绩加载方法，获取后台数据
loadScore()

/**
 * 翻页
 */
const handelCurrentChange = () => {
  // 翻页时，重新加载数据即可
  loadScore()
}

/**
 * 重置
 */
const reset = () => {
  scoreData.courseNo = ''
  // 重置时，重新加载数据即可
  loadScore()
}


/**
 * 修改成绩
 *
 * @param row 按行修改
 */
const editScore = (row) => {
  scoreData.form = JSON.parse(JSON.stringify(row))
  scoreData.formVisible = true
}

/**
 * 提交修改的学院
 */
const submitEditScore = () => {
  if (account.accountRoleName === 'visitor-teacher') {
    ElMessage.info("游客-教师仅可以查看信息")
  } else {
    scoreData.form.courseScoreUpdateMan = account.accountNo
    request.put(`/api/course-score/grade-teacher`, scoreData.form).then(res => {
      if (res.code === "200") {
        // 重新获取数据
        loadScore()
        // 关闭弹窗
        scoreData.formVisible = false
        ElMessage.success("打分成功")
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
}

/**
 * 导出Excel
 */
const exportExcel = () => {
  if (scoreData.excelOrderClassName === null || scoreData.excelOrderClassName === '') {
    ElMessage.error("导出失败")
  } else {
    request.post(`/api/system/export-student-score/${account.accountNo}`, scoreData.excelOrderClassName).then(res => {
      if (res.code === "200") {
        ElMessage.success("导出成功")
      } else {
        ElMessage.error("导出失败")
      }
    })
  }
}

/**
 * 重置Excel
 */
const resetExportExcel = () => {
  scoreData.excelOrderClassName = ''
}
</script>

<template>
  <div v-if="account.accountRoleName === 'common-teacher' || account.accountRoleName === 'visitor-teacher'">
    <div class="card" style="margin-bottom: 10px;">
      <el-input style="width: 300px; margin-right: 10px;" v-model="scoreData.courseNo"
                placeholder="请输入课程号查询"
                :prefix-icon="Search"/>
      <el-button @click="loadScore" type="primary" style="margin-left: 10px;">查询</el-button>
      <el-button @click="reset" type="info">重置</el-button>
    </div>
    <div class="card" style="margin-bottom: 10px;">
      <div>
        <el-table :data="scoreData.tableData" style="width: 100%">
          <el-table-column prop="courseScoreOrderClassNo" label="班号"/>
          <el-table-column prop="courseScoreOrderClassName" label="班名"/>
          <el-table-column prop="courseScoreCourseNo" label="课程号"/>
          <el-table-column prop="courseScoreCourseName" label="课程名"/>
          <el-table-column prop="courseScoreStudentNo" label="学号"/>
          <el-table-column prop="courseScoreStudentName" label="姓名"/>
          <el-table-column prop="courseScoreAchievement" label="成绩"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="editScore(scope.row)" type="primary" size="small" plain>打分
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="card">
      <el-pagination v-model:current-page="scoreData.pageNum"
                     v-model:page-size="scoreData.pageSize"
                     @current-change="handelCurrentChange"
                     background layout="prev, pager, next" :total="scoreData.total"/>
    </div>

    <el-dialog v-model="scoreData.formVisible" :close-on-click-modal="false" title="学院信息">
      <el-form :model="scoreData.form" label-width="100px" label-position="right"
               style="padding-right: 30px;">
        <el-form-item label="班名">
          <el-input placeholder="请输入班名" v-model="scoreData.form.courseScoreOrderClassName"
                    autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input placeholder="请输入学号" v-model="scoreData.form.courseScoreStudentNo"
                    autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" v-model="scoreData.form.courseScoreStudentName"
                    autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="课程名">
          <el-input placeholder="请输入课程名" v-model="scoreData.form.courseScoreCourseName"
                    autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="成绩">
          <el-input placeholder="请输入成绩" v-model="scoreData.form.courseScoreAchievement"
                    autocomplete="off"
                    :maxlength="4"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="scoreData.formVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitEditScore">提交</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>
